class Swiper{
    constructor(name,pre,next) {
      this.ulLisObj = this.query(name+' ul li', true);
      console.log(name);
    //    console.log(this.olLisObj, this.olObj);
      // 左右箭头
    //   this.query('.goPrev').addEventListener('click', this.prevClickFn.bind(this))
      this.query(pre).addEventListener('click', this.prevClickFn.bind(this))
      this.query(next).addEventListener('click', this.nextClickFn.bind(this))
      // 上一张图片序列号
      this.lastIndex = 0;
      // 当前图片序列号
      this.index = 0;
      // 定时器返回值
      this.times = '';
      this.autoPlay();

    //   this.div1 = this.query('.box');
      this.div1 = this.query(name);
      this.div1.addEventListener('mouseover', this.overFn.bind(this))
      this.div1.addEventListener('mouseout', this.outFn.bind(this))
    }
    // 左回调方法
    prevClickFn() {
      // 索引值变小
      this.lastIndex = this.index;
      this.index--;
      // 判断是否小于0
      if (this.index < 0) {
        this.index = this.ulLisObj.length - 1;

      }
      this.change();
    }
    // 右回调方法
    nextClickFn() {
      this.lastIndex = this.index;
      this.index++;
      // 判断是否已经过了最后一张
      if (this.index == this.ulLisObj.length) {
        this.index = 0;

      }
      this.change();
    }
    // 自动播放
    autoPlay() {
      this.times = setInterval(() => {
        this.nextClickFn();
      }, 2000)
    }
    //移入div1,则开始,移出则停止
    overFn() {
        clearInterval(this.times)
    }

    outFn() {
        this.autoPlay();
    }

    // 图片的切换
    change() {
      // 取出上一张的ac,给当前点击添加
      this.ulLisObj[this.lastIndex].className = '';
      this.ulLisObj[this.index].className = 'ac';
    }

    // 获取节点方法
    query(tag, all = false) {
      // return document.querySelector(tag)

      return all ? document.querySelectorAll(tag) : document.querySelector(tag);
    }
  }
  new Swiper('.box','.goPrev','.goNext');
  new Swiper('.box-right','.goPrev2','.goNext2');
  